<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>

    <style>
        .bannerContainer {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 50px auto;
            overflow: hidden;
        }

        .banner {
            display: flex;
            width: 3000px;
        }

        .banner img {
            width: 600px;
            height: 400px;
        }

        .arrowLeft {
            position: absolute;
            width: 30px;
            height: 30px;
            top: 50%;
            margin-top: -15px;
            left: 0;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
        }

        .arrowRight {
            position: absolute;
            width: 30px;
            height: 30px;
            top: 50%;
            margin-top: -15px;
            right: 0;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
        }

        .dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }

        .dot.active {
            background-color: white;
        }
    </style>

</head>

<body>
    <div class="bannerContainer">
        <div class="banner">
            <img src="./img/fj1.png">
            <img src="./img/fj2.png">
            <img src="./img/fj3.png">
            <img src="./img/fj4.png">
            <img src="./img/fj5.png">
        </div>

        <div class="arrowLeft">←</div>
        <div class="arrowRight">→</div>

        <div class="dots">
            <div class="dot active"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>

</body>
<script>
    let banner = document.querySelector('.banner');
    let arrowLeft = document.querySelector('.arrowLeft');
    let arrowRight = document.querySelector('.arrowRight');
    let dots = document.querySelectorAll('.dot');

    let currentIndex = 0;
    const totalImg = 5;
    const bannerWidth = 600;

    function updateBanner() {
        banner.style.transform = `translateX(-${currentIndex * bannerWidth}px)`;

        dots.forEach(function (dot, index) {
            dot.className = index == currentIndex ? 'dot active' : 'dot';
        });
    }

    function next() {
        currentIndex = (currentIndex + 1) % totalImg;
        updateBanner();
    }

    function prev() {
        currentIndex = (currentIndex - 1 + totalImg) % totalImg;
        updateBanner();
    }

    arrowLeft.addEventListener('click', prev);
    arrowRight.addEventListener('click', next);


    dots.forEach(function (dot, index) {
        dot.addEventListener('click', function () {
            currentIndex = index;
            updateBanner();
        });
    });

    setInterval(next, 3000);
</script>

</html>